<template>
  <div class="infinite-container">
    <mu-list class="bgwhite">
      <mu-list-item title="姓名">
        <mu-text-field hintTextClass="text-right" hintText="请输入姓名" v-model="form.realName" slot="right" class="mt10" inputClass="text-right" :disabled="disabled.realName">
        </mu-text-field>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item title="证件类型">
           <span class="list-right-title" >
            <selector :options="CARD_TYPE"  @selectchange="handleCardChange" :defaultValue="form.cardType"  :disabled="disabled.cardType"></selector>
          </span>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item title="证件号码">
        <mu-text-field v-model="form.cardNumber" hintTextClass="text-right" hintText="请输入证件号码"  slot="right" class="mt10" inputClass="text-right" :disabled="disabled.cardNumber">
        </mu-text-field>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item title="性别">
          <span class="list-right-title" >
            <selector :options="SEX_TYPE" @selectchange="handleSexChange" :defaultValue="sex" :disabled="disabled.sex"></selector>
          </span>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item title="出生日期">
         <mu-date-picker hintTextClass="text-right" hintText="请选择" v-model="bornDate" slot="right" class="mt10" inputClass="text-right" :disabled="disabled.bornDate"/>
      </mu-list-item>
      <mu-divider></mu-divider>

      <mu-list-item title="手机号码">
       <div slot="right" class="text-center">{{person.mobile}}</div>
      </mu-list-item>
      <mu-divider></mu-divider>
    </mu-list>

    <mu-flexbox :gutter="0" style="margin-top:4em;">
        <mu-flexbox-item grow="2"></mu-flexbox-item>
        <mu-flexbox-item grow="16">
         <mu-raised-button class="submit-btn" label="保存" @click="submitForm" fullWidth primary></mu-raised-button>
        </mu-flexbox-item>
        <mu-flexbox-item grow="2"></mu-flexbox-item>
      </mu-flexbox>

      <div class="pd10 t3 f12" style="padding:1em 30px;">
      <div>温馨提示：</div>
      <ul>
        <li v-for="(item, index) in IMPROVE_INFO_TIPS" :key="index">{{index+1}}.{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import {getBirthdayFromIdCard, getSexFromIdCard, testCardNumber, testEmpty} from '@/common/js/util.js'
import {commonAjax, RESTFUL_API} from '@/api/api'
import Selector from '@/components/Selector'
import {CARD_TYPE, SEX_TYPE, IMPROVE_INFO_TIPS} from '@/api/const'

export default {
  name: 'message',
  components: {Selector},
  data () {
    return {
      CARD_TYPE,
      SEX_TYPE,
      IMPROVE_INFO_TIPS,
      person: JSON.parse(sessionStorage.person || '{}'),
      form: {
        cardType: 1,
        cardNumber: '',
        realName: ''
      },
      bornDate: '',
      sex: 1,
      disabled: {
        realName: false,
        cardType: false,
        cardNumber: false,
        sex: false,
        bornDate: false
      }
    }
  },
  watch: {
    'form.cardNumber': function (val) {
      if (this.form.cardType === '1') {
        this.bornDate = getBirthdayFromIdCard(val)
        this.sex = getSexFromIdCard(val)
      }
    }
  },
  mounted () {
    if (this.person.idcard) {
      this.disabled = {
        realName: false,
        cardType: true,
        cardNumber: true,
        sex: true,
        bornDate: false
      }
    } else {
      this.disabled = {
        realName: false,
        cardType: false,
        cardNumber: false,
        sex: false,
        bornDate: false
      }
    }
    this.form.realName = this.person.realname || ''
    this.form.cardNumber = this.person.idcard || ''
    this.form.cardType = this.person.cardtype || '1'
    this.bornDate = this.person.dob && this.person.dob.substring(0, 10) || ''
  },
  destroyed () {
  },
  methods: {
    handleCardChange (val) {
      this.form.cardType = val
    },
    handleSexChange (val) {
      this.sex = val
    },
    submitForm () {
      if (this.cardType === '01' && !testCardNumber(this.form.cardNumber)) {
        this.$store.commit('UPDATE_TOAST', {
          message: '证件号码格式错误'
        })
        return false
      }
      if (testEmpty(this.form.realName)) {
        this.$store.commit('UPDATE_TOAST', {
          message: '请填写您的真实姓名'
        })
        return false
      }
      if (testEmpty(this.bornDate)) {
        this.$store.commit('UPDATE_TOAST', {
          message: '请选择出生日期'
        })
        return false
      }
      // xhr start
      let personJson = {
        id: this.person.id,
        realname: this.form.realName,
        cardtype: this.form.cardType,
        idcard: this.form.cardNumber,
        sexcode: this.sex,
        birthdate: this.bornDate,
        mobile: this.person.mobile
      }
      commonAjax(`${RESTFUL_API.modifyAccount}`, personJson).then(res => {
          if (res.data.code == 200) {
          this.$store.commit('UPDATE_TOAST', {
            message: '保存成功',
            fn: () => this.$router.push({
              path: `/login`,
              query: {
                redirect: '/setting'
              }
            })
          })
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.msg
          })
        }
      }).catch(res => {
          this.$store.commit('UPDATE_TOAST', {message: res})
      })
    }
  }
}
</script>
